import React from 'react';

import memo from '../../common/wrapMemo';

import style from './LayerFilter.module.scss';

const {L} = window;
const {BASE_URL} = window.CONFIG;

// 圆
let tempCircle = null;
// 矩形
let tempRect = null;
// 多边形
let tempPolygon = null;
// 关闭marker
let closeMarker = null;

const LayerFilter = memo((props) => {
    const {map, drawEnd} = props;

    // 绘制自定义图形
    const drawPolygon = () => {
        clear();

        map.doubleClickZoom.disable();
        let line1 = new L.polyline([],{color: "#ff7800", weight: 1});
        let line2 = new L.polyline([],{color: "#ff7800", weight: 1});
        let points = [];
        map.on('click', onClick);                  
        map.on('dblclick', onDoubleClick);
        map.on('mousemove', onMove);               
        
        function onClick(e) {
            points.push([e.latlng.lat, e.latlng.lng]);
            line1.addLatLng(e.latlng);
            map.addLayer(line2);
            map.addLayer(line1);
        }
        function onMove(e) {
            if (points.length > 0) {
                let ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng], points[0]];
                line2.setLatLngs(ls);
            }
        }
        function onDoubleClick() {
            tempPolygon = L.polygon(points,{color: "#ff7800", weight: 1}).addTo(map);
            // console.log(tempPolygon.toGeoJSON());
            points = [];
            if(line1){
                map.removeLayer(line1);
                line1 = null;
            }
            if(line2){
                map.removeLayer(line2);
                line2 = null;
            }
            map.off('click', onClick);                      //点击地图
            map.off('dblclick', onDoubleClick);
            map.off('mousemove', onMove);                   //双击地图
            map.doubleClickZoom.enable();

            const geometry = tempPolygon.toGeoJSON().geometry;

            // 触发搜索事件
            drawEnd({shape: 1, geojson: geometry});

            // 添加关闭marker
            addCloseMarker(geometry.coordinates[0][2]);
        }
    };

    // 绘制圆形
    const drawCircle = () => {
        let c = null, r = 0;
        clear();

        tempCircle = new L.circle();
        map.dragging.disable();

        // 监听鼠标按下事件
        map.on('mousedown', onmousedown);

        function onmousedown (e) {
            c = e.latlng;
            // 监听鼠标移动事件
            map.on('mousemove', onMove);
            // 监听鼠标抬起事件
            map.on('mouseup', onmouseUp);
        }

        function onMove (e) {
            // 计算半径
            r = L.latLng(e.latlng).distanceTo(c);
            
            if (c) {
                tempCircle.setLatLng(c);
                tempCircle.setRadius(r);
                tempCircle.setStyle({ color: '#ff7800',  fillOpacity: 0 });
                map.addLayer(tempCircle);
            }
        }

        function onmouseUp() {
            map.dragging.enable();

            // 触发搜索事件
            const geometry = tempCircle.toGeoJSON().geometry;
            drawEnd({shape: 2, radius: r, geojson: tempCircle.toGeoJSON().geometry});
            
            c = null;
            r = 0;
            
            map.off('mousedown');
            map.off('mouseup');
            map.off('mousemove');

            // 添加关闭marker
            addCloseMarker(geometry.coordinates);
        }
    };

    // 绘制矩形
    const drawRect = () => {
        clear();
        map.dragging.disable();
        map.on('mousedown', (e1) => {
            tempRect = new L.rectangle([e1.latlng, e1.latlng], {color: "#ff7800", weight: 1}).addTo(map);
            map.on('mousemove',(e2) => {
                tempRect.setBounds([e1.latlng,e2.latlng])
            });
            map.on('mouseup', () => {
                map.dragging.enable();
                map.off('mousedown');
                map.off('mousemove');
                map.off('mouseup');

                const geometry = tempRect.toGeoJSON().geometry;

                // 触发搜索事件
                drawEnd({shape: 1, geojson: geometry});
                // 添加关闭marker
                addCloseMarker(geometry.coordinates[0][2]);
            });
        });
    };

    // 添加关闭marker
    const addCloseMarker = (latlng) => {
        let icon = L.icon({
            iconUrl: `${BASE_URL}/images/close.png`,
            iconSize:[26,26],
            iconAnchor: [12,12]
        });

        const lnglat = JSON.parse(JSON.stringify(latlng));

        closeMarker = new L.marker(lnglat.reverse(), { icon: icon }).addTo(map)

        closeMarker.on('click', () => {
            drawEnd({});
            clear();
        });
    };

    // 移除
    const clear = () => {
        if(tempCircle){
            map.removeLayer(tempCircle);
            tempCircle = null;
        }

        if(tempRect){
            map.removeLayer(tempRect);
            tempRect = null;
        }

        if(tempPolygon){
            map.removeLayer(tempPolygon);
            tempPolygon = null;
        }

        if(closeMarker){
            map.removeLayer(closeMarker);
            closeMarker = null;
        }
    };

    return (
        <div className={style.layerFilter}>
            <div className={style.header}>筛选</div>
            <div className={style.content}>
                <span onClick={drawPolygon}>多边形</span>
                <span className={style.center} onClick={drawCircle}>圆形</span>
                <span onClick={drawRect}>矩形</span>
            </div>
        </div>
    )
});

export default LayerFilter;